<template>
  <div class="content">
    <button-search placeholder="要搜索的研究方向" @search="searchEvent">
      <!-- 左边 -->
      <template #left>
        <div style="display:flex">
          <el-button type="primary" size="mini" @click="DownloadMB" style="margin-right:10px">下载模版</el-button>
          <el-upload
            action="/"
            accept=".xls,.xlsx"
            :limit="1"
            :auto-upload="false"
            :on-change="handleUpload"
            :show-file-list="false"
            style="margin-right:10px"
          >
            <el-button type="primary" size="mini">导入</el-button>
          </el-upload>
          <el-button type="primary" size="mini" @click="$router.push({path: '/article/create'})">新增</el-button>
        </div>
      </template>
      <!-- 高级搜索表单 -->
      <template #form>
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="研究方向">
            <el-input style="width:160px" v-model="searchForm.research_direction" placeholder="要搜索的研究方向" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="数据类型">
            <el-input style="width:160px" v-model="searchForm.data_type" placeholder="要搜索的数据类型" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="影响因子">
            <el-input style="width:160px" v-model="searchForm.factor" placeholder="要搜索的影响因子" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="公司名称">
            <el-input style="width:160px" v-model="searchForm.company" placeholder="要搜索的公司名称" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="疾病类型">
            <el-input style="width:160px" v-model="searchForm.disease_class" placeholder="要搜索的疾病类型" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchEvent" size="mini">搜索</el-button>
            <el-button size="mini" @click="clearSearch">清空筛选条件</el-button>
          </el-form-item>
        </el-form>
      </template>
    </button-search>
    <!-- 表格 -->
    <el-table style="margin-top: 15px" :data="tableData" border>
      <el-table-column label="序号" prop="id" align="center" width="80"/>
      <el-table-column label="贡献者" prop="contributor" align="center" width="100"/>
      <el-table-column label="公司" prop="company" align="center" width="200"/>
      <el-table-column label="发表文章名称" prop="article_name" align="center" width="200" show-overflow-tooltip/>
      <el-table-column label="MID" prop="mid" align="center" width="100"/>
      <el-table-column label="PID" prop="pid" align="center" width="100"/>
      <el-table-column label="期刊" prop="periodical" align="center" width="150"/>
      <el-table-column label="影响因子" prop="factor" align="center" width="150"/>
      <el-table-column label="发表时间" prop="publish_time" align="center" width="150"/>
      <el-table-column label="是否共一" prop="is_gongyi" align="center" width="150"/>
      <el-table-column label="是否通讯" prop="is_tongxun" align="center" width="150"/>
      <el-table-column label="合作单位1" prop="cooperation1" align="center" width="150" show-overflow-tooltip/>
      <el-table-column label="合作单位2" prop="cooperation2" align="center" width="150" show-overflow-tooltip/>
      <el-table-column label="文章方向" prop="article_direction" align="center" width="150" show-overflow-tooltip/>
      <el-table-column label="文章类型" prop="article_type" align="center" width="150"/>
      <el-table-column label="研究方向" prop="research_direction" align="center" width="150"/>
      <el-table-column label="使用数据类型" prop="data_type" align="center" width="150"/>
      <el-table-column label="数据种类" prop="data_class" align="center" width="150"/>
      <el-table-column label="疾病大类" prop="disease_class" align="center" width="150"/>
      <el-table-column label="数据量" prop="data_volume" align="center" width="150" show-overflow-tooltip/>
      <el-table-column label="创建时间" align="center" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time | dateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.update_time | dateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="$router.push({path: '/article/edit',query: { id: scope.row.id }})">编辑</el-button>
          <el-button type="danger" size="mini" @click="delItem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      style="margin-top: 20px"
      :current-page="page.current"
      :page-sizes="page.sizes"
      :page-size="page.size"
      layout="total,sizes,prev,pager,next,jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import buttonSearch from '@/components/ButtonSearch/index.vue'
import common from '@/mixins/common'
import { export_json_to_excel } from '@/utils/excel/Export2Excel'
import XLSX from 'xlsx'
export default {
  mixins: [common],
  components: {
    buttonSearch
  },
  data(){
    return {
      urlEnum: 'ARTICLE_LIST', // 接口字典
      searchForm: {
        research_direction: '',
        data_type: '',
        factor: '',
        company: '',
        disease_class: ''
      }, // 搜索表单
      tableData: [], // 表格数据
      // 表格模版结构
      xlsHeader: {
        '贡献者': 'contributor',
        '公司': 'company',
        '发表文章名称': 'article_name',
        'MID': 'mid',
        'PID': 'pid',
        '期刊': 'periodical',
        '影响因子': 'factor',
        '发表时间': 'publish_time',
        '是否共一': 'is_gongyi',
        '是否通讯': 'is_tongxun',
        '合作单位1': 'cooperation1',
        '合作单位2': 'cooperation2',
        '文章方向': 'article_direction',
        '文章类型': 'article_type',
        '研究方向': 'research_direction',
        '使用数据类型': 'data_type',
        '数据种类': 'data_class',
        '疾病子类': 'disease_class',
        '数据量': 'data_volume'
      },
      // 表格数据
      xlsList: [],
    }
  },
  methods: {
    // 搜索
    searchEvent(e = false){
      // 简单搜索
      if(typeof e === 'string'){
        this.searchForm.research_direction = e
      }
      // 高级搜索
      this.getList(true)
    },
    // 清空筛选条件
    clearSearch(){
      this.searchForm = {
        research_direction: '',
        data_type: '',
        factor: '',
        company: '',
        disease_class: ''
      }
    },
    // 下载模版
    DownloadMB(){
      // 列表标题
      const tHeader = [
        '贡献者',
        '公司',
        '发表文章名称',
        'MID',
        'PID',
        '期刊',
        '影响因子',
        '发表时间',
        '是否共一',
        '是否通讯',
        '合作单位1',
        '合作单位2',
        '文章方向',
        '文章类型',
        '研究方向',
        '使用数据类型',
        '数据种类',
        '疾病子类',
        '数据量'
      ];
      // 标题对应的对象属性
      const filterVal = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S'];
      // 表格数据
      const list = [
        {
          A: '马保国',
          B: '其他',
          C: '我在英国教功夫',
          D: '352645',
          E: '589742',
          F: 'NEW ENGLAND JOURNAL OF MEDICINE',
          G: '74.699',
          H: '2008年8月',
          I: '否',
          J: '否',
          K: '河南人民出版社',
          L: '北京科学技术出版社',
          M: '功夫',
          N: '技术研发',
          O: '太极拳',
          P: '蛋白组检测',
          Q: '闪电9连鞭',
          R: '鼻咽癌',
          S: '9'
        }
      ]
      // 整理数据
      const data = list.map(v => filterVal.map(j => v[j]))
      // 导出
      export_json_to_excel(tHeader,data,'信息录入模版')
    },
    // 上传前
    handleUpload(file){
      this.xlsList = []
      let that = this
      this.file2Xce(file).then(res => {
        if(res && res.length > 0){
          res[0].sheet.forEach(item => {
            let obj = {}
            for(let key in item){
              obj[that.xlsHeader[key]] = item[key]
            }
            that.xlsList.push(obj)
            console.log('表单',this.xlsList)
            this.$confirm(
              `您确定要导入${this.xlsList.length}条数据？`,
              '提示',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }
            ).then(() => {
              this.axios.post('ARTICLE_CREATE_ALL',that.xlsList).then(() => {
                window.location.reload(true)
              })
            })
          })
        }
      })
    },
    // 读取文件
    file2Xce(file){
      return new Promise(function(resolve){
        const reader = new FileReader();
        reader.onload = function(e){
          const data = e.target.result;
          this.wb = XLSX.read(data,{
            type: 'binary'
          });
          const result = [];
          this.wb.SheetNames.forEach(sheetName => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
            })
          })
          resolve(result)
        }
        reader.readAsBinaryString(file.raw)
        //reader.readAsBinaryString(file)
      })
    },
    // 删除项
    delItem(id){
      this.$confirm('您确定要删除这条数据？','提示',{
        confirmButtonText: '确定',
        canceButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post('DELETE_ARTICLE',{id}).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getList()
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content{
  padding: 15px 10px;
  height: calc(90vh);
  overflow-y: scroll;
}
</style>